<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1> {{ name }} -- {{ sex }} </h1>
        <button @click="setSex">改变 sex</button>
    </div>
</body>
<script>

    /*
        ref属性：用来标记DOM元素，或者标记组件用的
        $refs：属性是用来获取被 ref 标记的元素或组件
        ref方法：让基本类型的数据具备响应式
        toRefs方法：让解构出的数据具备响应式
        toRef方法：解构时如果没有该属性就会自动创建该属性
    */

    const { reactive, toRefs, toRef } = Vue
    const app = Vue.createApp({
        setup (props, context) {

            const obj = reactive({
                name: '张一',
                age: 18,
                h: 178
            })


            let { name } = toRefs(obj)

            // 对应不确定有或者没有的属性，我们可以使用 toRef 来进行解构
            // toRef 在当对象中有我们需要的属性时，会直接解构使用，如果没有
            // 我们想要的属性时，会自动创建一个空的 sex 属性，其目的就是为了
            // 防止使用的时候出现找不到的情况
            let sex = toRef(obj, 'sex')

            function setSex () {
                // sex.value = '男'
                // console.log(sex);

                sex.value = '男'
            }

            return {
                name,
                sex,
                setSex
            }
        },
    })
    app.mount('#app')
</script>

</html>